<template>
  <d2-container>
    <div class="row-ac pb-2">
      <div><el-button type="warning" size="small" icon="el-icon-plus" @click="addPoints">添加积分兑换</el-button></div>
    </div>
    <div class="flex-1 ml-2">
      <el-table :data="pointsList" stripe border>
        <el-table-column align="center" label="序号" type="index" width="40" />
        <el-table-column label="名称" prop="title" width="100" />
        <el-table-column align="center" label="分类" prop="category_name" width="60" />
        <el-table-column align="center" label="图片" prop="product_name" width="60">
          <template slot-scope="scope">
            <el-popover placement="right" trigger="hover">
              <el-image slot="reference" style="width: 30px; height: 30px" :src="scope.row.product_img" fit="cover" />
              <el-image style="width: 220px; height: 220px" :src="scope.row.product_img" fit="cover" />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="商品名" prop="product_name" width="130" />
        <el-table-column align="center" label="兑换积分" prop="points" width="60" />
        <el-table-column align="center" label="所需金额" prop="points_price" width="60" />
        <el-table-column align="center" label="兑换数量" prop="pointsnum" width="60" />
        <el-table-column align="center" label="剩余" prop="residuenum" width="60" />
        <el-table-column align="center" label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="primary" @click="pointsEdit(scope.row.id)" size="mini">修改</el-button>
            <el-button size="mini" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex-1 mt-3">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="queryInfoPoints.page" layout="total, prev, pager, next" :total="pointsTotal">
        </el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="42%" title="添加/编辑积分兑换">
      <el-form :model="formPoints" ref="form" label-width="80px">
        <el-form-item label="名称" prop="title">
          <div style="width: 60%;">
            <el-input v-model="formPoints.title"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="分类" prop="product">
          <div style="width: 60%;">
            <el-select v-model="formPoints.category" clearable filterable remote :remote-method="searchCategory"
              placeholder="请输入商品名进行搜索">
              <el-option v-for="categores in categoryList" :key="categores.id" :label="categores.category_name"
                :value="categores.id">
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="兑换商品" prop="product">
          <div style="width: 60%;">
            <el-select v-model="formPoints.product" clearable filterable remote :remote-method="searchProducts"
              placeholder="请输入商品名进行搜索">
              <el-option v-for="item in productList" :key="item.id" :label="item.product_name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="所需积分" prop="points">
          <el-input-number v-model="formPoints.points" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="所需金额" prop="points_price">
          <el-input-number v-model="formPoints.points_price" :precision="2" :min="0" :step="0.01"></el-input-number>
        </el-form-item>
        <el-form-item label="兑换数量" prop="pointsnum">
          <el-input-number v-model="formPoints.pointsnum" :min="1"></el-input-number>
        </el-form-item>
        <div>
          <el-form-item label="是否推荐" prop="is_recommend">
            <el-switch v-model="formPoints.is_recommend"></el-switch>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </div>
    </el-dialog>

  </d2-container>
</template>

<script>
  import {
    pointsmallListUrl,
    pointsmallCreateUrl,
    pointsmallDetailUrl,
    pointsmallUpdateUrl,
    pointsmallDeleteUrl
  } from "@/utils/promotion"
  import {
    productListUrl,
    productCategoriesUrl,
  } from '@/utils/product'
  export default {
    data() {
      return {
        queryInfoPoints: {
          page: 1,
          pageSize: 10
        },
        pointsList: [],
        pointsTotal: 0,
        dialogVisible: false,
        addPointsStatus: true,
        formPoints: {
          title: '',
          category: '',
          product: '',
          points: 0,
          points_price: 0,
          pointsnum: 0,
          residuenum: 0,
          is_recommend: false
        },
        queryInfoProduct: {
          product_state: 0,
          search: '',
          page: 1,
          pageSize: 10
        },
        queryInfoCategory: {
          search: '',
          page: 1,
          pageSize: 10
        },
        getPointsId: '',
        productList: [],
        categoryList: []
      }
    },
    created() {
      this.initData()
    },
    methods: {
      initData() {
        this.getPointsmallList()
        this.getProductList()
        this.getProductCategoryList()
      },
      searchProducts(queryProduct) {
        this.getProductList(queryProduct)
      },
      getProductList(queryProduct) {
        this.queryInfoProduct.search = queryProduct;
        this.$get(productListUrl, this.queryInfoProduct).then(res => {
          if (res.data.code == 200) {
            this.productList = res.data.data.list
          }
        })
      },
      searchCategory(queryCategory) {
        this.getProductCategoryList(queryCategory)
      },
      getProductCategoryList(queryCategory) {
        this.queryInfoCategory.search = queryCategory;
        this.$get(productCategoriesUrl, this.queryInfoCategory).then(res => {
          if (res.data.code == 200) {
            this.categoryList = res.data.data.list
          }
        })
      },
      getPointsmallList() {
        this.$get(pointsmallListUrl, this.queryInfoPoints).then(res => {
          this.pointsList = res.data.data.list
          this.pointsTotal = res.data.data.total
        })
      },
      // 分页页码显示条数
      handleSizeChange(newSize) {
        // 把每页显示多少数据重新赋值
        this.queryInfoPoints.pageSize = newSize
        this.getPointsmallList()
      },
      // 翻页事件
      handleCurrentChange(newPage) {
        this.queryInfoPoints.page = newPage
        this.getPointsmallList()
      },
      addPoints() {
        this.dialogVisible = true
        this.addPointsStatus = true
      },
      pointsEdit(pointsId) {
        this.dialogVisible = true
        this.addPointsStatus = false
        this.getPointsId = pointsId
        this.$get(pointsmallDetailUrl + pointsId + '/').then(res => {
          if (res.data.code == 200) {
            this.formPoints = {
              title: res.data.data.title,
              category: res.data.data.category,
              product: res.data.data.product,
              points: res.data.data.points,
              points_price: res.data.data.points_price,
              pointsnum: res.data.data.pointsnum,
              residuenum: res.data.data.residuenum,
              is_recommend: res.data.data.is_recommend
            }
          }
        })
      },
      submitForm() {
        if (this.addPointsStatus == true) {
          this.$post(pointsmallCreateUrl, this.formPoints).then(res => {
            if (res.data.code == 200) {
              this.dialogVisible = false
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.formPoints = {}
              this.getPointsmallList()
            }
          })
        } else {
          this.$put(pointsmallUpdateUrl + this.getPointsId + '/', this.formPoints).then(res => {
            if (res.data.code == 200) {
              this.dialogVisible = false
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.formPoints = {}
              this.getPointsmallList()
            }
          })
        }
      }
    }
  }
</script>

<style>
</style>